<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div>
          <div style="padding:5px">
            <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
              <tr>
                <td colspan="21" class="header" align="center">
                  特殊人口数据汇总统计
                </td>
              </tr>
              <tr style="background:#ededed">
                <td>地区/类型</td>
                <td v-for="(v,i) in cun" :key="i">
                  {{v}}
                </td>
                <td>合计</td>
              </tr>
              <tr v-for="(v,i) in person" :key="i" :style="i==1?'background:#ededed':''">
                <td>{{v=='肇事肇祸等严重精神障碍患者'?'精神病患者':v}}</td>
                <td v-for="(m,n) in cun" :key="n">
                  {{datas[i][n]}}
                </td>
                <td>
                  {{getLittleSum(i)}}
                </td>
              </tr>
              <tr style="background:#ededed">
                <td>小计</td>
                <td v-for="(m,n) in cun" :key="n">
                  {{getSum(n)}}
                </td>
                <td>{{getTotal()}}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-row>
        <el-col :span="24">
          <div id="stackchart" style="width:100%;height:400px;margin-top:20px"></div>
        </el-col>
        <el-row>
          <el-col :span="8">
            <div align="center" id="histogram" style="width:100%; height:800px;background:white"></div>
          </el-col>
          <el-col :span="8">
            <div align="center" id="histogram1" style="width:100%; height:800px;background:white"></div>
          </el-col>
          <el-col :span="8">
            <div align="center" id="histogram2" style="width:100%; height:800px;background:white"></div>
          </el-col>
        </el-row>
      </el-row>
    </el-row>

    <el-dialog :title="title" :visible.sync="visible" size="large">
      <el-tabs v-model="activeName">
        <el-tab-pane label="严重精神病患者" name="first">
          <el-row>
            <el-col :span="24" style="padding-top:10px">
              <el-table :data="jsbData" border style="width:100%">
                <el-table-column style="width:50px" label="编号" prop="id" align="center">
                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center">
                </el-table-column>
                <el-table-column label="性别" prop="sex" align="center">
                  <template scope="scope">
                    {{sexs.filter(i=>{if(i.v==scope.row.sex)return i})[0].l}}
                  </template>
                </el-table-column>
                <el-table-column label="政治面貌" prop="politics" align="center">
                </el-table-column>
                <el-table-column label="身份证号" width="300px" prop="certifID" align="center">
                </el-table-column>
                <el-table-column label="出生日期" prop="birthDate" align="center">
                </el-table-column>
                <el-table-column label="职业" prop="career" align="center">
                </el-table-column>
                <el-table-column label="移动电话" prop="mobileTel" align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template scope="scope">
                    <el-button type="text" @click="watchDetail(scope.row.certifID,'03')" size="small">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24" style="margin-top:10px" align="right">
              <el-pagination layout="prev, pager, next" :total="jsbfilters.totalInfo" @current-change="handleCurrentChange">
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="刑满释放人员" name="second">
          <el-row>
            <el-col :span="24" style="padding-top:10px">
              <el-table :data="xmData" border style="width:100%">
                <el-table-column style="width:50px" label="编号" prop="id" align="center">
                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center">
                </el-table-column>
                <el-table-column label="性别" prop="sex" align="center">
                  <template scope="scope">
                    {{sexs.filter(i=>{if(i.v==scope.row.sex)return i})[0].l}}
                  </template>
                </el-table-column>
                <el-table-column label="政治面貌" prop="politics" align="center">
                </el-table-column>
                <el-table-column label="身份证号" width="300px" prop="certifID" align="center">
                </el-table-column>
                <el-table-column label="出生日期" prop="birthDate" align="center">
                </el-table-column>
                <el-table-column label="职业" prop="career" align="center">
                </el-table-column>
                <el-table-column label="移动电话" prop="mobileTel" align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template scope="scope">
                    <el-button type="text" @click="watchDetail(scope.row.certifID,'01')" size="small">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24" style="margin-top:10px" align="right">
              <el-pagination layout="prev, pager, next" :total="xmfilters.totalInfo" @current-change="handleCurrentChange2">
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="社区矫正人员" name="third">
          <el-row>
            <el-col :span="24" style="padding-top:10px">
              <el-table :data="sqData" border style="width:100%">
                <el-table-column style="width:50px" label="编号" prop="id" align="center">
                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center">
                </el-table-column>
                <el-table-column label="性别" prop="sex" align="center">
                  <template scope="scope">
                    {{sexs.filter(i=>{if(i.v==scope.row.sex)return i})[0].l}}
                  </template>
                </el-table-column>
                <el-table-column label="政治面貌" prop="politics" align="center">
                </el-table-column>
                <el-table-column label="身份证号" width="300px" prop="certifID" align="center">
                </el-table-column>
                <el-table-column label="出生日期" prop="birthDate" align="center">
                </el-table-column>
                <el-table-column label="职业" prop="career" align="center">
                </el-table-column>
                <el-table-column label="移动电话" prop="mobileTel" align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template scope="scope">
                    <el-button type="text" @click="watchDetail(scope.row.certifID,'02')" size="small">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24" style="margin-top:10px" align="right">
              <el-pagination layout="prev, pager, next" :total="sqfilters.totalInfo" @current-change="handleCurrentChange3">
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog size="large" top="5%" title="查看详情" :visible.sync="visible2">
      <info :id="id" :specialId="x"></info>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/specialPopulation/index";
import info from "./specialInfo";
export default {
  components: {
    info
  },
  data() {
    return {
      histogram: null,
      histogram1: null,
      histogram2: null,
      stackChart: null,
      area: [],
      sexs: [
        {
          v: "0",
          l: "未知的性别"
        },
        {
          v: "1",
          l: "男性"
        },
        {
          v: "2",
          l: "女性"
        },
        {
          v: "9",
          l: "未说明性别"
        }
      ],
      areaData: [
        { netGridID: 1, netGridName: "南巷村" },
        { netGridID: 2, netGridName: "新塘村" },
        { netGridID: 3, netGridName: "九华村" },
        { netGridID: 4, netGridName: "后塘村" },
        { netGridID: 5, netGridName: "大卓村" },
        { netGridID: 6, netGridName: "黄梅村" },
        { netGridID: 7, netGridName: "下荫村" },
        { netGridID: 8, netGridName: "莲塘村" },
        { netGridID: 9, netGridName: "赤岗社区" },
        { netGridID: 10, netGridName: "石狮村" },
        { netGridID: 11, netGridName: "杨塘岗社区" },
        { netGridID: 12, netGridName: "姚徐村" },
        { netGridID: 13, netGridName: "河桥村" },
        { netGridID: 14, netGridName: "后莘村" },
        { netGridID: 15, netGridName: "杜家山村" },
        { netGridID: 16, netGridName: "三里井社区" },
        { netGridID: 17, netGridName: "西庙社区" },
        { netGridID: 18, netGridName: "三台阁社区" },
        { netGridID: 19, netGridName: "寨里社区" }
      ],
      person: [],
      cun: [],
      datas: [],
      total: 0,
      title: "",
      visible: false,
      visible2: false,
      activeName: "first",
      jsbData: [],
      xmData: [],
      sqData: [],
      jsbfilters: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        totalInfo: 0,
        servedPersonTypeValue: "01"
      },
      xmfilters: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        totalInfo: 0,
        servedPersonTypeValue: "02"
      },
      sqfilters: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        totalInfo: 0,
        servedPersonTypeValue: "03"
      },
      id: 1,
      x: 1,
      myobj: null,
      myobj1: null,
      myobj2: null
    };
  },
  methods: {
    watchDetail(ID, x) {
      this.id = ID;
      this.x = x;
      this.visible2 = true;
    },
    handleCurrentChange(val) {
      this.jsbfilters.page = val;
      this.getPsychoticPerson();
    },
    handleCurrentChange2(val) {
      this.xmfilters.page = val;
      this.getEmancipistPerson();
    },
    handleCurrentChange3(val) {
      this.sqfilters.page = val;
      this.getCorrectioner();
    },
    getLittleSum(n) {
      return this.datas[n].reduce((x, y) => {
        return x + y;
      });
    },
    getSum(x) {
      let sum = 0;
      for (let i = 0; i < this.datas.length; i++) {
        sum += this.datas[i][x];
      }
      // for (let i = 0; i < this.datas[x].length; i++) {
      //   sum += this.datas[x][i];
      // }
      return sum;
    },
    getTotal() {
      let sum = 0;
      for (let i = 0; i < this.datas.length; i++) {
        for (let j = 0; j < this.datas[i].length; j++) {
          sum += this.datas[i][j];
        }
      }
      return sum;
    },
    initStackCharts(person, cun, datas) {
      this.stackChart = echarts.init(document.getElementById("stackchart"));
      this.stackChart.setOption({
        title: {
          text: "特殊人口的各村分布图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: person
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: cun,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: -30
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: datas
      });
      this.stackChart.getZr().on("click", params => {
        var pointInPixel = [params.offsetX, params.offsetY];
        if (this.stackChart.containPixel("grid", pointInPixel)) {
          var pointInGrid = this.stackChart.convertFromPixel(
            { seriesIndex: 0 },
            pointInPixel
          );
          //X轴序号
          var xIndex = pointInGrid[0];

          //获取当前图表的option
          var op = this.stackChart.getOption();

          var name = op.xAxis[0].data[xIndex];

          this.title = name + "特殊人口数据";
          let id = this.getAreaIDByName(name);
          this.getCorrectioner();
          this.getEmancipistPerson();
          this.getPsychoticPerson();
          this.visible = true;
        }
      });
    },
    getCorrectioner() {
      api.fetchCorrectionerPerson(this.sqfilters).then(res => {
        this.sqData = res.data.vos;
        this.sqfilters.totalInfo = res.data.page.totalCount;
      });
    },
    getEmancipistPerson() {
      api.fetchEmancipistPerson(this.xmfilters).then(res => {
        this.xmData = res.data.vos;
        this.xmfilters.totalInfo = res.data.page.totalCount;
      });
    },
    getPsychoticPerson() {
      api.fetchPsychoticPerson(this.jsbfilters).then(res => {
        this.jsbData = res.data.vos;
        this.jsbfilters.totalInfo = res.data.page.totalCount;
      });
    },
    getAreaIDByName(name) {
      return this.areaData.filter(m => {
        if (m.netGridName == name) {
          return m;
        }
      })[0].netGridID;
    },
    initCharts() {
      api.getIndexChart().then(res => {
        this.person = res.data[1];
        this.cun = res.data[0];
        this.datas = [res.data[2], res.data[3], res.data[4]];

        let self = this;
        var myseries = [];
        for (let i = 0; i < this.datas.length; i++) {
          var obj = {
            name: self.person[i],
            type: "line",
            stack: "总量",
            areaStyle: { normal: {} },
            data: self.datas[i]
          };
          myseries.push(obj);
        }
        this.initStackCharts(this.person, this.cun, myseries);
      });
    },
    // 绘制柱状图
    drawHistogram1(obj) {
      this.histogram1 = echarts.init(document.getElementById("histogram1"));
      this.histogram1.setOption({
        title: {
          text: "刑满释放人员各村分布图",
          left: "center",
          top: 20,
          textStyle: {
            color: "#000000"
          }
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}人({d}%)"
        },
        series: [
          {
            name: "分布比例",
            type: "pie",
            radius: "80%",
            center: ["50%", "55%"],
            data: obj.sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(25,25,112, 1)"
                }
              }
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      });
    },
    drawHistogram(obj) {
      this.histogram = echarts.init(document.getElementById("histogram"));
      this.histogram.setOption({
        // backgroundColor: "#eeeeee",
        title: {
          text: "社区矫正人员各村分布图",
          left: "center",
          top: 20,
          textStyle: {
            color: "#000000"
          }
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}人({d}%)"
        },
        series: [
          {
            name: "分布比例",
            type: "pie",
            radius: "80%",
            center: ["50%", "55%"],
            data: obj.sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(25,25,112, 1)"
                }
              }
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      });
    },
    // 绘制柱状图
    drawHistogram2(obj) {
      this.histogram2 = echarts.init(document.getElementById("histogram2"));
      this.histogram2.setOption({
        title: {
          text: "严重精神病患者各村分布图",
          left: "center",
          top: 20,
          textStyle: {
            color: "#000000"
          }
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}人({d}%)"
        },
        series: [
          {
            name: "分布比例",
            type: "pie",
            radius: "80%",
            center: ["50%", "55%"],
            data: obj.sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(25,25,112, 1)"
                }
              }
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      });
    },
    initChart() {
      api.getSpecialPersonPieChart("02").then(res => {
        this.myobj = res.data;
        this.drawHistogram(this.myobj);
      });
    },
    initChart1() {
      api.getSpecialPersonPieChart("01").then(res => {
        this.myobj1 = res.data;
        this.drawHistogram1(this.myobj1);
      });
    },
    initChart2() {
      api.getSpecialPersonPieChart("03").then(res => {
        this.myobj2 = res.data;
        this.drawHistogram2(this.myobj2);
      });
    },
    init() {
      this.initChart();
      this.initChart1();
      this.initChart2();
      this.initCharts();
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped>
.tjInfo {
  /* margin-top: 50px; */
  background-color: aliceblue;
  width: 100%;
  height: 800px;
  padding: 10px;
  /* text-indent: 2em; */
}
.userInfoEditTable,
.userInfoEditTable td {
  /* font-size: 8px; */
  /* border: 1px solid darkgrey; */
  padding: 10px;
  text-align: center;
}
.header {
  font-weight: bold;
  color: white;
  background: black;
}
</style>
